<template>
	<view class="mIcon ">
		<image @click="click" v-if="isImg" :style="style" :src="isImg" mode=""></image>
		<uni-icons  v-else style="display: inline-flex;" @click="click" :color="color" :size="size+'rpx'" :style="style" customPrefix="iconfont"
			:type="type"></uni-icons>
	</view>
</template>

<script>
	import { array } from '@/libs/fn/verify.js'
	import mIcon from './mIcon.js'
	export default {
		name: "m-icon",
		props: {
			type: {
				type: String,
				default: ''
			},
			size: {
				//图片模式下  宽高默认30
				//非图片模式  大小默认36 rpx
				type: [Number, String, Array],
				default: 36
			},
			color: {
				type: String,
				default: 'var(--text)'
			},
			spa: {
				type: String,
				default: '0'
			},
			gap: {
				type: String,
				default: '0'
			},
			rotate: {
				type: [Number, String],
				default: 0
			},
			disabled: {
				type: Boolean,
				default: false, //是否禁止
			},
			radius: {
				default: '',
				type: String,
			},
			bgColor: {
				default: '',
				type: String,
			},
			boxShadow: {
				default: '',
				type: String,
			},
		},
		computed: {
			isImg() {
				return mIcon[this.type.toLowerCase()]
			},
			style() {
				const spa = this.spa.split(" ").filter(x => x);
				const gap = this.gap.split(" ").filter(x => x);
				const radius = this.radius.split(" ").filter(x => x);
				let style = {
					padding: gap.map(n => `${n}rpx`).join(' '),
					margin: spa.map(n => `${n}rpx`).join(' '),
					transform: 'rotate(' + this.rotate + 'deg)',
					borderRadius: radius.map(n => `${n}rpx`).join(' '),
					background: this.bgColor,
				}
				if (this.isImg) {
					//图片模式下  宽高默认30
					let width = 30,
						height = 30;
					if (array(this.size)) {
						width = this.size[0]
						height = this.size[1]
					} else {
						height = width = this.size.toString()
					}
					style.width = `${width}rpx`
					style.height = `${height}rpx`
				}
				return style
			}
		},
		data() {
			return {
				isWX:false,
				style2: "",
			};
		},
		mounted() {
			/* #ifdef MP-WEIXIN */
			this.isWX = true;
			/* #endif */
			const spa = this.spa.split(" ").filter(x => x);
			const gap = this.gap.split(" ").filter(x => x);
			const radius = this.radius.split(" ").filter(x => x);

			let padding =`padding:${gap.map(n => `${n}rpx`).join(' ')}`;
			let margin =spa?`margin:${spa.map(n => `${n}rpx`).join(' ')}`:'';
			let transform =this.rotate?`transform:rotate(${this.rotate}deg)`:'';
			let borderRadius = radius ? `${this.isWX?'border-radius':'borderRadius'}:${radius.map(n => `${n}rpx`).join(' ')}` : '';
			let background =this.bgColor?`background:${this.bgColor}`:'';
			let boxShadow=this.boxShadow?`box-shadow:${this.boxShadow}`:'';
			let width = '';
			let height = '';
			if (this.isImg) {
				//图片模式下  宽高默认30
				let Dwidth = 30,
					Dheight = 30;
				if (array(this.size)) {
					Dwidth = this.size[0]
					Dheight = this.size[1]
				} else {
					Dheight = Dwidth = this.size.toString()
				}
				width = `width:${Dwidth}rpx`;
				height = `height:${Dheight}rpx`;
			}
			this.style2 = `${padding};${margin};${transform};${borderRadius};${background};${width};${height};${boxShadow}`;
		},
		methods: {
			click() {
				if (this.disabled) return
				this.$emit('click')
			},
		}
	}
</script>

<style lang="scss">
	.mIcon {
		display: inline-block;
		image {
			display: block;
		}
	}

	.rotate180 {
		display: inline-block;
		transform: rotate(180deg);
	}

	.uni-icons {
		display: block !important;
	}
</style>